import React, { Component } from "react";
import { Input } from "antd";
import { connect } from "dva";
import CustomMade from "./components/CustomMade";
import Common from "./components/Common";

import styles from "./SituationPage.less";

const { Search } = Input;

@connect(stores => ({
  stData: stores.situationList
}))
class SituationPage extends Component {
  state = {
    self: true,
    common: false,
    search: ""
  };

  change = e => {
    if (e === "self") {
      this.setState({
        self: true,
        common: false
      });
    } else {
      this.setState({
        self: false,
        common: true
      });
    }
  };

  handleSearch = e => {
    this.setState({
      search: e
    });
  };

  clearChange = e => {
    if (e.target.value === "") {
      this.setState({
        search: ""
      });
    }
  };

  render() {
    const { self, search } = this.state;
    const { history } = this.props;
    return (
      <div className={styles.root}>
        <div className={styles.topSearch}>
          <div className={styles.search}>
            <Search
              placeholder="场景名称、数据源名称、管理员姓名"
              enterButton="搜索"
              size="default"
              style={{ width: 410 }}
              onSearch={this.handleSearch}
              allowClear
              onChange={this.clearChange}
            />
          </div>
          <div className={styles.tab}>
            <span
              className={self ? styles.tabpane : styles.notSelect}
              onClick={() => this.change("self")}
            >
              自定义场景
            </span>
            {/* <span
              className={common ? styles.tabpane : styles.notSelect}
              // onClick={() => this.change("common")}
            >
              通用场景
            </span> */}
          </div>
        </div>
        <div className={styles.secbody}>
          {self ? (
            <CustomMade key={search} history={history} search={search} />
          ) : (
            <Common history={history} search={search} />
          )}
        </div>
      </div>
    );
  }
}

export default SituationPage;
